<script lang="ts" setup>
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { couponDataList, couponStatistics, editChannel, getChannels } from '@fl/api/anjutong'
import { SearchForm, SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'

const props = withDefaults(defineProps<{
    id: string
    name: string
}>(), {
    id: '',
    name: 'discount',
})
const { id } = toRefs(props)
const dialogInitialState = {
    useTime: [], // 使用时间
    userName: undefined, // 用户名称
}
const timeRange = ref({
    endTime: undefined,
    startTime: undefined,
})
const dialogState = ref(cloneDeep(dialogInitialState))
const dialogcolumns = [
    {
        colProps: {
            span: 9,
        },
        label: '用户名称',
        prop: 'userName',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 15,
        },
        fieldProps: {
            'endPlaceholder': '结束时间',
            'startPlaceholder': '开始时间',
            'type': 'datetimerange',
            'value-format': 'YYYY-MM-DD hh:mm:ss',
        },
        label: '使用时间',
        prop: 'useTime',
        valueType: 'date-picker',
    },

]

const dialogGridOptions = reactive<VxeGridProps>({
    columns: [
        { title: '序号', type: 'seq', width: 70 },
        { field: 'userName', title: '用户名称' },
        { field: 'receiveTime', title: '领取时间' },
        { field: 'couponNo', title: '劵号' },
        { field: 'channelCode', slots: { default: 'channelCode' }, title: '渠道' },
        { field: 'useTime', title: '使用时间' },
        { field: 'writer', title: '核销人' },
        { fixed: 'right', slots: { default: 'operate' }, title: '操作' },
    ],
})
const dialogInitialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const dialogtablePage = ref(cloneDeep(dialogInitialPage))
const dialogisLoading = ref(false)
const dialogList = ref([])
const tagList = ref([])
const channelList = ref([])

watch(id, (val: string) => {
    if (val) {
        init()
    }
}, {
    deep: true,
    immediate: true,
})

/**
 * methods start
 */

function init() {
    getCouponStatistics()
    getDataList()
    getChannelList()
}

// 获取渠道列表
function getChannelList() {
    getChannels().then((res) => {
        channelList.value = res
    })
}

// 获取统计数据
function getCouponStatistics() {
    couponStatistics({
        id: props.id,
    }).then((res) => {
        tagList.value = props.name === 'discount'
            ? [
                    {
                        field: 'receiveQuantity',
                        num: res.receiveQuantity,
                        title: '领取人数',
                    },
                    {
                        field: 'userQuantity',
                        num: res.userQuantity,
                        title: '使用人数',
                    },

                ]
            : [
                    {
                        field: 'receiveQuantity',
                        num: res.receiveQuantity,
                        title: '领取张数',
                    },
                    {
                        field: 'recipientQuantity',
                        num: res.userQuantity,
                        title: '领取人数',
                    },
                    {
                        field: 'useQuantity',
                        num: res.userQuantity,
                        title: '使用张数',
                    },
                    {
                        field: 'userQuantity',
                        num: res.userQuantity,
                        title: '使用人数',
                    },

                ]
    })
}

// 获取数据列表
function getDataList() {
    couponDataList({
        id: props.id,
        ...dialogState.value,
        ...timeRange.value,
        pageNum: dialogtablePage.value.currentPage,
        pageSize: dialogtablePage.value.pageSize,
        useTime: undefined,
    }).then((res) => {
        dialogList.value = res.records
        dialogtablePage.value.total = res.total
    })
}

const dialoghandlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    dialogtablePage.value.currentPage = currentPage
    dialogtablePage.value.pageSize = pageSize
    getDataList()
}
function dialogReset() {
    dialogState.value = cloneDeep(dialogInitialState)
    timeRange.value = {
        endTime: '',
        startTime: '',
    }
    dialogtablePage.value = cloneDeep(dialogInitialPage)
    getDataList()
}

function updateChannel(row) {
    const currentChannel = channelList.value.find(item => item.channelCode === row.channelCode)
    editChannel({
        channelCode: row.channelCode,
        channelName: currentChannel.channelName,
        id: row.id,
    }).then(() => {
        ElMessage.success('操作成功')
        getDataList()
    })
}

function dialogSearch(values) {
    if (values) {
        dialogState.value = values
        if (values.useTime) {
            timeRange.value.startTime = values.useTime[0]
            timeRange.value.endTime = values.useTime[1]
        }
        else {
            timeRange.value.startTime = undefined
            timeRange.value.endTime = undefined
        }
        getDataList()
    }
}

/**
 * methods end
 */
</script>

<template>
    <div class="activity-data">
        <div class="coupon-info">
            <div class="base-info">
                <dl v-for="tag in tagList"
                    :key="tag.title"
                    :class="['receiveQuantity', 'recipientQuantity'].includes(tag.field) ? 'tag sheet-num' : 'tag people-num'"
                >
                    <dt>{{ tag.title }}</dt>

                    <dd>{{ tag.num }}</dd>
                </dl>
            </div>
        </div>

        <div class="coupon-data-list">
            <SearchForm v-bind="dialogState"
                        :columns="dialogcolumns"
                        submit-text="查询"
                        @reset="dialogReset"
                        @submit="dialogSearch"
            />

            <SearchTable v-bind="dialogGridOptions"
                         v-model:pager="dialogtablePage"
                         :loading="dialogisLoading"
                         :data="dialogList"
                         @page-change="dialoghandlePageChange"
            >
                <template #channelCode="{ row }">
                    <el-select v-model="row.channelCode"
                               placeholder="Select"
                    >
                        <el-option v-for="item in channelList"
                                   :key="item.channelCode"
                                   :label="item.channelName"
                                   :value="item.channelCode"
                        />
                    </el-select>
                </template>

                <template #operate="{ row }">
                    <el-button type="primary"
                               text
                               @click="updateChannel(row)"
                    >
                        更新渠道
                    </el-button>
                </template>
            </SearchTable>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.coupon-info {
    .base-info {
        display: flex;
        .tag {
            flex: 1;
            height: 70px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0;
            margin-right: 20px;
            padding: 0;
            dt {
                font-size: 16px;
                margin: 0;
                padding: 0;
            }
            dd {
                font-size: 24px;
                font-weight: 600;
                margin: 0;
                padding: 0;
            }
            &.sheet-num {
                background-color: #e5f0fa;
                dd {
                    color: #006dcc;
                }
            }
            &.people-num {
                background-color: #fff0f0;
                dd {
                    color: #da0004;
                }
            }
        }
    }
}
.coupon-data-list {
    margin-top: 24px;
    .el-form {
        display: flex;
        justify-content: space-between;
    }
    :deep(.plus-form .plus-form__footer) {
        margin-right: 50px;
    }
}
.vxe-grid {
    height: calc(100vh - 365px) !important;
}
</style>
